<template>
    <tnxel-submit-form ref="form" :model="model" :rules="rules">
        <h4 class="mt-0 flex-h-center">
            <MavenProjectPath :project="mavenProject"/>
        </h4>
        <el-tabs type="border-card" v-model="tabIndex">
            <el-tab-pane label="基础设置" :name="0">
                <el-form-item label="显示名称" prop="caption" label-width="90px" class="new-error-line">
                    <el-input v-model="model.caption"/>
                </el-form-item>
                <el-form-item label="数据库厂商" prop="databaseVendor" label-width="90px" class="mb-0">
                    <tnxel-select v-model="model.databaseVendor" :items="databaseVendorItems"/>
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="默认表名规则" :name="1">
                <tnxel-alert>修改规则设置不影响已经设定表名的实体类</tnxel-alert>
                <div class="d-flex mb-3">
                    <div>
                        <div class="strong text-regular text-end">实体类名</div>
                        <div class="text-muted mt-1">{{ exampleClass.getName() }}</div>
                    </div>
                    <div class="mx-3">
                        <div class="">
                            <tnxel-icon class="text-regular" style="margin-top: 2px;" value="Right"/>
                        </div>
                        <div class="mt-1">
                            <tnxel-icon class="text-muted" style="margin-top: 2px;" value="Right"/>
                        </div>
                    </div>
                    <div>
                        <div class="strong text-regular">表名</div>
                        <div class="text-muted mt-1">{{ exampleTableName }}</div>
                    </div>
                </div>
                <el-form-item label="固定前缀" prop="fixedPrefix" class="new-error-line">
                    <el-input v-model="model.fixedPrefix" @input="generateExampleTableName"/>
                </el-form-item>
                <el-form-item label="包含模块名前缀" prop="modulePrefixEnabled">
                    <tnxel-enum-select v-model="model.modulePrefixEnabled" type="Boolean" selector="radio"
                        @change="generateExampleTableName"/>
                </el-form-item>
                <el-form-item label="分离数字" prop="numberSplit" class="mb-0">
                    <tnxel-enum-select v-model="model.numberSplit" type="Boolean" selector="radio"
                        @change="generateExampleTableName"/>
                </el-form-item>
            </el-tab-pane>
        </el-tabs>
    </tnxel-submit-form>
</template>

<script>
import tnx from '@/tnx.js';
import MavenProjectPath from '@/renderer/pages/maven/components/MavenProjectPath.vue';
import ModelingApp from '@/logic/modeling/entity/ModelingApp.js';
import EntityClass from '@/logic/modeling/entity/EntityClass.js';
import TableNameRule from '@/logic/modeling/entity/TableNameRule.js';
import PersistUtil from '@/logic/modeling/util/persist.js';
import PhysicalTypes from '@/logic/modeling/util/database-physical-types.js';
import TypeKind from '@/logic/modeling/enums/TypeKind.js';

export default {
    components: {MavenProjectPath},
    props: {
        app: {
            type: ModelingApp,
            required: true,
        },
        tabName: String,
        after: Function,
    },
    data() {
        let exampleClass = new EntityClass(TypeKind.UNITY, 'com.example.base.model.entity', 'TestUnity123');
        return {
            mavenProject: null,
            tabIndex: this.tabName === 'table' ? 1 : 0,
            model: {
                caption: this.app.caption,
                databaseVendor: this.app.databaseVendor,
                fixedPrefix: this.app.tableNameRule.fixedPrefix,
                modulePrefixEnabled: this.app.tableNameRule.modulePrefixEnabled,
                numberSplit: this.app.tableNameRule.numberSplit,
            },
            exampleClass: exampleClass,
            exampleTableName: this.app.getTableName(exampleClass),
            rules: {
                caption: [tnx.app.validator.requiredRule, tnx.app.validator.getRule('notContainsHtmlChars', true)],
                fixedPrefix: [tnx.app.validator.getRule('regex', {
                    pattern: '^[a-zA-Z0-9_]*$',
                    message: '无效的表名前缀'
                })],
            },
            defaultDatabaseVendor: '',
        };
    },
    computed: {
        databaseVendorItems() {
            const databaseVendorItems = [];
            Object.keys(PhysicalTypes).forEach(vendor => {
                let text = vendor;
                if (vendor === this.defaultDatabaseVendor) {
                    text += ' (代码配置)';
                }
                databaseVendorItems.push({
                    value: vendor,
                    text: text,
                });
            });
            return databaseVendorItems;
        },
    },
    mounted() {
        PersistUtil.loadRelativeMavenProject(this.app.path).then(mavenProject => {
            this.mavenProject = mavenProject;
        });
        PersistUtil.readDatabaseVendor(this.app.path).then(databaseVendor => {
            this.defaultDatabaseVendor = databaseVendor;
        });
    },
    methods: {
        dialog() {
            return {
                title: '应用设置',
                width: 560,
                type: 'confirm',
                click: this.toSubmit,
            }
        },
        generateExampleTableName() {
            this.exampleTableName = TableNameRule.of(this.model).getDefaultTableName(this.exampleClass);
        },
        toSubmit(yes, close) {
            if (yes) {
                this.$refs.form.toSubmit(form => {
                    let model = {
                        caption: this.model.caption,
                        databaseVendor: this.model.databaseVendor,
                        tableNameRule: {
                            fixedPrefix: this.model.fixedPrefix,
                            modulePrefixEnabled: this.model.modulePrefixEnabled,
                            numberSplit: this.model.numberSplit,
                        }
                    };
                    if (this.after(model) !== false) {
                        close();
                    } else {
                        form.disable(false);
                    }
                });
                return false;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
</style>
